<div :class="name">
    <div class="user-add-list">
        <h5 class="user-add-title-color">角色列表
            <a class="user-add-title-color" href="javascript:void(0)">筛选</a>
            <a class="user-add-title-color" href="javascript:void(0)">操作</a>
        </h5>
        <div class="scroll-user-add">
            <ul class="item" v-for="user in data">
                <li class="item-title user-add-title-color">角色名称：{{user.roleName}}</li>
                <li>角色说明：{{user.roleInfo}}</li>
                <li class="col">创建时间：{{user.roleCreateTime}}</li>
            </ul>
        </div>
        <div class="all-list-page">
            <template>
                <Page :total="100" size="small" show-sizer show-total></Page>
            </template>
        </div>
    </div>
    <div class="user-add-editor">
        <h5 class="user-add-title-color">编辑权限
            <a class="user-add-title-color" href="javascript:void(0)">保存</a>
            <a class="user-add-title-color" href="javascript:void(0)">取消</a>
            <a class="user-add-title-color" href="javascript:void(0)">更改</a>
        </h5>
        <div class="user-add-editor-content">
            <div class="user-add-editor-i">
                <table>
                    <tr>
                        <template>
                            <div class="user-add-title-color" style="border-bottom: 1px solid rgb(233, 233, 233);padding-bottom: 6px;margin: 15px 0 6px 0;">
                                <Checkbox
                                        :indeterminate="indeterminate"
                                        :value="checkAll"
                                        @click.prevent.native="handleCheckAll('')">订单板块</Checkbox>
                            </div>
                            <Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange('')">
                                <Checkbox label="新增"></Checkbox>
                                <Checkbox label="删除"></Checkbox>
                                <Checkbox label="编辑"></Checkbox>
                                <Checkbox label="提交订单"></Checkbox>
                                <Checkbox label="撤销订单"></Checkbox>
                            </Checkbox-group>
                        </template>
                    </tr>
                    <tr>
                        <template>
                            <div class="user-add-title-color" style="border-bottom: 1px solid rgb(233, 233, 233);padding-bottom: 6px;margin: 15px 0 6px 0;">
                                <Checkbox
                                        :indeterminate="indeterminateCapital"
                                        :value="checkAllCapital"
                                        @click.prevent.native="handleCheckAll('Capital')">融资板块</Checkbox>
                            </div>
                            <Checkbox-group v-model="checkAllGroupCapital" @on-change="checkAllGroupChange('Capital')">
                                <Checkbox label="新增"></Checkbox>
                                <Checkbox label="删除"></Checkbox>
                                <Checkbox label="编辑"></Checkbox>
                                <Checkbox label="申请融资"></Checkbox>
                                <Checkbox label="存预付款"></Checkbox>
                            </Checkbox-group>
                        </template>
                    </tr>
                    <tr>
                        <template>
                            <div class="user-add-title-color" style="border-bottom: 1px solid rgb(233, 233, 233);padding-bottom: 6px;margin: 15px 0 6px 0;">
                                <Checkbox
                                        :indeterminate="indeterminateLogistics"
                                        :value="checkAllLogistics"
                                        @click.prevent.native="handleCheckAll('Logistics')">物流板块</Checkbox>
                            </div>
                            <Checkbox-group v-model="checkAllGroupLogistics" @on-change="checkAllGroupChange('Logistics')">
                                <Checkbox label="新增"></Checkbox>
                                <Checkbox label="删除"></Checkbox>
                                <Checkbox label="编辑"></Checkbox>
                                <Checkbox label="申请融资"></Checkbox>
                                <Checkbox label="存预付款"></Checkbox>
                            </Checkbox-group>
                        </template>
                    </tr>
                    <tr>
                        <template>
                            <div class="user-add-title-color" style="border-bottom: 1px solid rgb(233, 233, 233);padding-bottom: 6px;margin: 15px 0 6px 0;">
                                <Checkbox
                                        :indeterminate="indeterminateFinance"
                                        :value="checkAllFinance"
                                        @click.prevent.native="handleCheckAll('Finance')">物流板块</Checkbox>
                            </div>
                            <Checkbox-group v-model="checkAllGroupFinance" @on-change="checkAllGroupChange('Finance')">
                                <Checkbox label="新增"></Checkbox>
                                <Checkbox label="删除"></Checkbox>
                                <Checkbox label="编辑"></Checkbox>
                                <Checkbox label="申请融资"></Checkbox>
                                <Checkbox label="存预付款"></Checkbox>
                            </Checkbox-group>
                        </template>
                    </tr>
                </table>
            </div>
            <div class="user-add-editor-a">
                <p><a href="javascript:void(0)" class="user-add-title-color">更多信息</a></p>
            </div>
        </div>
    </div>
</div>